import { Component } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import fileUpload from '../../utils/qiniu/upload'
import Taro from '@tarojs/taro'
import {
  TaroCropper
} from 'taro-cropper3';

import ImageCropper from './ImageCropper'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.less'

export default class Index extends Component {
  state = {
    corpImg: '',
    cropperVisible: false
  }

  taroCropper = null;
  
  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onScrollToUpper = (e) => {
    console.log(e, "onScrollToUpper")
  }

  onScrollToLower = (e) => {
    console.log(e, "onScrollToLower")
  }

  handleImageUpload = () => {
    Taro.chooseImage({
      count: 4,
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success: async (res) => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        Taro.showLoading({title: '图片上传中'})
        const uploads = tempFilePaths.map(item => fileUpload.uploadImg(item))
        const paths = await Promise.all(uploads)
        console.log(paths, 222222)
        // this.detailPhotoList = [...this.detailPhotoList, ...paths]
        Taro.hideLoading()
      }
    })
  }

  render () {
    const { cropperVisible, corpImg } = this.state
    return (
      <ScrollView
        className='test-page'
        scrollY
        scrollWithAnimation
        scrollTop={0}
        lowerThreshold={30}
        upperThreshold={30}
        onScrollToUpper={this.onScrollToUpper} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
        onScrollToLower={this.onScrollToLower}
      >
        <View>
          {/* <View className='top' onClick={this.handleImageUpload}>
            上传图片
          </View> */}
          {/* <View className='center'>
            <Image src={this.state.corpImg} />
          </View> */}
          {/* <View className='bottom'> */}
            {/* <TaroCropper
              src='http://qnm.hunliji.com/o_1b5mfriorpqa1g06mtl15it5901t.jpg?imageView2/2/w/760/h/580'
              fullScreen
              hideCancelText={true}
              hideFinishText={true}
              height={1000}
              cropperWidth={600}
              cropperHeight={750}
              ref={(ref) => {
                this.taroCropper = ref
              }}
              onCut={res => {
                console.log(res, 11111)
                this.setState({
                  corpImg: res
                })
              }}
            />

        <View onClick={() => {
          console.log('onClick')
          this.taroCropper && this.taroCropper.cut()
            .then(res => {
              console.log("cut", res);
              this.setState({
                cutImagePath: res.filePath
              });
            })
            .catch(err => {
              console.log(err);
            })
        }}>
          裁剪
        </View> */}
          {/* </View> */}
        </View>

        <View onClick={() => {
          this.setState({
            cropperVisible: true
          })
        }}>
          去裁剪
        </View>

        <Image
          className='swiper-photos-item-img'
          mode="aspectFill"
          src={corpImg}
        />

        {corpImg}
        {cropperVisible &&
          <ImageCropper
            visible={cropperVisible}
            image={"http://qnm.hunliji.com/o_1b5mfriorpqa1g06mtl15it5901t.jpg"}
            onClose={() => {
              this.setState({
                cropperVisible: false
              })
            }}
            onOk={(resp) => {
              this.setState({
                corpImg: resp,
                cropperVisible: false
              })
              console.log(resp, 111222333444)
            }}
          />
        }
      </ScrollView>
    )
  }
}